<template>
  <div class="project-list">
    <div class="content">
      <div class="project-box">
        <div class="header-tabs">
          <ul>
            <li class="category-item" :class="{'active-category': projectType === ''}" @click="checkProjectType('')">全部</li>
            <li class="category-item" :class="{'active-category': projectType === '0'}" @click="checkProjectType('0')">我创建的</li>
            <li class="category-item" :class="{'active-category': projectType === '1'}" @click="checkProjectType('1')">我克隆的</li>
          </ul>
          <span class="count">共{{totalProject}}个项目</span>
        </div>
        <load-data v-show="loadState"></load-data>
        <ul class="data-list">
          <li v-for="item in projectView" class="item" :key="item.id" @click="toDetail(item)">
            <div class="tag">
              <div class="title">{{item.projectName}}</div>
              <p class="desc">{{item.profile ? item.profile : '无简介'}}</p>
              <p class="tag-footer">
                <span class="tag-footer-use">
                  <img class="task-icon" src="@/common/image/icon/task.png">
                  <span>{{item.taskNumber}}个任务</span>
                </span>
                <span class="tag-footer-category">
                  <span><img class="algorithm-icon" src="@/common/image/icon/icon-algorithm.png">{{item.algorithm}}</span>
                </span>
              </p>
            </div>
          </li>
        </ul>
        <div class="loadmore" v-if="!loadState && hasNextPage">
          <p class="loadmore-box">
            <i v-show="loadingMore" class="el-icon-loading"></i>
            <span v-show="!loadingMore">加载更多...</span>
          </p>
        </div>
        <div class="no-data-box" v-show="!loadState && projectView.length === 0">
          <div class="no-data">
            <img src="@/common/image/nocontent.png">
            <p class="no-data-title">当前列表为空</p>
            <p v-show="projectType === ''" class="no-data-create">您还没有创建任何项目，现在就来<a @click="quickStart">创建自己的项目</a>吧</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProjectList } from '@/api/project'
import { getBrowseRecord, insertBrowseRecord } from '@/api/user'
import { mapMutations, mapGetters } from 'vuex'
import loadData from '@/base/load'
export default {
  inject: ['reload'],
  data () {
    return {
      // 总页数
      totalPage: 0,
      totalPageTask: 0,
      // 每页条数
      pageSize: 18,
      pageSizeTask: 10,
      // 当前页
      pageNumber: 1,
      pageNumberTask: 1,
      // 是否有下一页
      hasNextPage: false,
      // Loading
      loadingMore: false,
      // 当前激活tab页
      activeTab: 1,
      // 项目类型
      projectType: '',
      projectView: [],
      taskView: [],
      totalProject: 0,
      totalTask: 0,
      bottom: false,
      finished: false,
      // 数据加载过程
      loadState: true
    }
  },
  methods: {
    toDetail (item) {
      // this.storeProject(item)
      this.$router.push({ path: '/project/detail/task', query: { projectid: item.id } })
    },
    // 切换项目查看类型
    checkProjectType (type) {
      this.projectType = type
      this.pageNumber = 1
      this._getProjectList(type, true)
    },
    // 快速开始项目
    quickStart () {
      this.$router.push('/project/quickstart')
    },
    // 处理滚动事件
    handleScroll () {
      let footerHeight = document.getElementById('footer').clientHeight
      let scrollY = window.scrollY
      let visible = document.documentElement.clientHeight
      let pageHeight = document.documentElement.scrollHeight - (footerHeight / 2)
      let bottomOfPage = visible + scrollY >= pageHeight
      this.bottom = bottomOfPage || pageHeight < visible
    },
    /*
      获取项目列表
      isCheckType: 切换项目类型时，重置projectView
    */
    _getProjectList (type, isCheckType) {
      let typeVal = type
      if (type === '') {
        typeVal = ''
      }
      let query = `?origin=${typeVal}&cp=${this.pageNumber}&ps=${this.pageSize}`
      this.finished = true
      getProjectList(query).then(res => {
        this.loadState = false
        this.loadingMore = false
        if (res.message.code === 0) {
          this.loadingMore = false
          this.hasNextPage = res.data.hasNextPage
          if (isCheckType) {
            this.projectView = []
          }
          this.projectView = this.projectView.concat(res.data.list)
          this.totalProject = res.data.total
          if (this.hasNextPage) {
            this.finished = false
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 添加功能浏览记录信息
    _insertBrowseRecord () {
      let query = `?type=1`
      insertBrowseRecord(query).then(res => {
        if (res.message.code !== 0) {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    ...mapMutations({
      storeProject: 'SET_CUR_PROJECT',
      storeTaskFromHome: 'SET_TASK_FROM_HOME'
    })
  },
  computed: {
    ...mapGetters([
      'taskFromHome'
    ])
  },
  beforeCreate () {
    let query = `?type=1`
    getBrowseRecord(query).then(res => {
      if (res.message && res.message.code === 0) {
        if (!res.data) {
          this._insertBrowseRecord()
          this.$router.push('/project/quickstart')
        } else {
          return false
        }
      } else {
        this.$message({ message: res.message.message, showClose: true, type: 'error' })
      }
    })
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    if (this.$route.query.reloadbtn) {
      this.$router.push({ path: '/project/list' })
      this.reload()
    }
    this._getProjectList('')
  },
  watch: {
    bottom: function (bottom) {
      if (this.finished === true) {
        return
      }
      if (bottom) {
        this.loadingMore = true
        this.pageNumber++
        this._getProjectList(this.projectType)
      }
    }
  },
  components: {
    loadData
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
.project-list
  .content
    flex 1
    width 100%
    position relative
    margin 0 auto
    max-width 1162px
    // padding-top 20px
    .project-box
      height 100%
      .header-tabs
        padding 20px 0
        display flex
        align-items center
        justify-content space-between
        user-select none
        .category-item
          display inline-block
          font-size 14px
          color #8D9091
          color #555
          margin-right 22px
          cursor pointer
          &:hover
            color #2196f3
        .active-category
          color #2196f3
        .count
          font-size 14px
          color #555555
    .data-list
      display flex
      flex-wrap wrap
      align-items stretch
      margin-left -15px
      margin-right -15px
      .item
        width 367px
        display inline-block
        border-radius 5px
        background #fff
        box-sizing border-box
        transition all .2s linear
        position relative
        margin 0 15px 29px
        .tag
          position relative
          display inline-block
          width 100%
          transition border-color 0.3s
          text-align left
          padding 16px 25px
          cursor pointer
          transition all 0.3s ease-in-out
          bottom 0
          box-sizing border-box
          border 1px solid #E8E8E8
          border-radius 8px
          .tag-footer
            font-size 14px
            color #2D323B
            display flex
            align-items center
            justify-content space-between
            padding-top 24px
            .tag-footer-category
              font-size 14px
              color #666666
              >span
                margin-left 13px
          &:hover
            box-shadow 0 0 10px 0 rgba(74,74,74,0.15)
          .title
            font-weight 600
            font-size 18px
            color #24292E
            line-height 37px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .desc
            height 40px
            overflow hidden
            display -webkit-box
            -webkit-line-clamp 2
            line-height 20px
            text-overflow ellipsis
            -webkit-box-orient vertical
            font-size 14px
            color #8E9091
            letter-spacing 0
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            /*! autoprefixer: off */
            -webkit-box-orient vertical
            /* autoprefixer: on */
            -webkit-line-clamp 2
            word-break break-all
            word-wrap break-word
          .task-icon
            width 12px
            height 12px
            display inline-block
            margin-right 7px
          .algorithm-icon
            width 15px
            height 12px
            display inline-block
            margin-right 7px
  .loadmore
    display flex
    align-items center
    justify-content center
    height 50px
    .loadmore-box
      height 40px
      line-height 40px
      font-size 16px
      width 50%
      display flex
      align-items center
      justify-content center
      background #f5f7fa
      cursor pointer
</style>
